<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="notice-group">
				<view class="notice-cell " v-for="(item, index) in list" :key="item.notice_id" :class="{ read: item.is_read == 1 }">
					<image class="face" :src="item.smeta.from.avatar ? item.smeta.from.avatar.file_path : errorImageSrc" />

					<view class="content">
						<view class="text">{{ item.content }}</view>
						<view class="time">{{ item.create_time }}</view>
					</view>
					<view class="cover" v-if="typeInfo.type_key == 'moment'">
						<block v-if="item.smeta.moment">
							<view class="cover-text" v-if="!item.smeta.moment.file.length > 0">{{ item.smeta.moment.content }}</view>
							<image class="cover-text" :src="item.smeta.moment.file[0].file.file_path" v-else mode="aspectFill" />
						</block>
						<image class="cover-text" :src="errorImageSrc" v-else />
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { setNoticeRead } from '@/store/dispatches.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			id: null,
			typeInfo: {},
			list: []
		};
	},
	onLoad(options) {
		const id = options.id || null;
		if (id > 0) {
			this.id = id;
		} else {
			this.navigateBack();
		}
	},
	methods: {
		upCallback(mescroll) {
			this.$u.api.getOfficialNoticeList(this.id, mescroll.num).then(res => {
				const { list, type_info } = res.data;
				this.typeInfo = type_info;
				if (mescroll.num == 1) {
					this.list = list.data;
					uni.setNavigationBarTitle({
						title: type_info.name || '系统通知'
					});
					setNoticeRead(this.id);
					this.$u.api.setNoticeRead(this.id);
				} else {
					this.list.push(...list.data);
				}
				this.mescroll.endBySize(list.data.length, list.total);
			});
		}
	}
};
</script>

<style lang="scss">
.notice-group {
	padding: 18rpx 0;
	background: #fff;
	.notice-cell {
		padding: 27rpx 32rpx 35rpx;
		display: flex;
		align-items: center;
		&.read {
			filter: grayscale(100%);
			filter: gray;
			opacity: 0.8;
		}
		.face {
			width: 100rpx;
			height: 100rpx;
			border-radius: 88rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
		.content {
			flex: 1;
			min-height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.text {
				min-height: 36rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				line-height: 36rpx;
			}
			.time {
				text-align: right;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
				line-height: 28rpx;
			}
		}
		.cover {
			flex-shrink: 0;
			width: 200rpx;
			height: 100rpx;
			border-radius: 6rpx;
			background-color: #eaeaea;
			margin-left: 28rpx;
			position: relative;
			overflow: hidden;
			.cover-text {
				width: 400rpx;
				min-height: 100%;
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 24rpx;
				color: #999;
			}
			.cover-image {
				width: 200rpx;
				height: 100rpx;
				border-radius: 6rpx;
			}
		}
	}
}
</style>
